<template>
  <!-- <div>个人中心</div> -->
  <LCR class="personal">
    <panel>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="文章" name="blog">
          <BlogTab :user="user"></BlogTab>
        </el-tab-pane>
        <el-tab-pane label="游戏" name="game">
          <el-empty
            :image-size="200"
            v-if="state.game.length == 0"
            description="开发中"
          />
        </el-tab-pane>
        <el-tab-pane label="个人信息" name="info">
          <Info></Info>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="modifyPwd">
          <ModifyPwd></ModifyPwd>
        </el-tab-pane>
      </el-tabs>
    </panel>
  </LCR>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, getCurrentInstance, watch } from "vue";
import { useUserStore } from "@/stores/user";
import { useRoute } from "vue-router";
import LCR from "@/layout/LCR.vue";
import UserProfileCard from "./../profile/UserProfileCard.vue";
import Info from "./Info.vue";
import ModifyPwd from "./modifyPwd.vue";

import type { TabsPaneContext } from "element-plus";
import Panel from "@/components/Panel.vue";
import { listBlogByUser } from "@/api/blog";
import { listGameInfo } from "@/api/game";
import { RouterLink } from "vue-router";
import BlogTab from "../profile/BlogTab.vue";

const route = useRoute();

const user = useUserStore().userinfo;

const activeName = ref("blog");

const state = ref({
  lately: <any>[],
  blog: <any>[],
  game: <any>[],
});

onMounted(() => {
  const { id } = route.params;
  if (id) {
    // TODO: 查看其他人信息
  } else {
    // TODO: 查看自己的信息
  }
});
const userStore = useUserStore();
function loadData() {
  const userId = userStore.userId;
  listBlogByUser(userId.value);
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event);
};
console.log(user);
</script>

<style lang="less" scoped>
.personal {
  width: 80%;
  margin: 0 auto;
}
</style>
